<template>
	<a-list :bordered="false">
		<a-list-item>
			<a-list-item-meta>
				<template #avatar>
					<a-typography-paragraph>
						{{ $t('userSetting.SecuritySettings.form.label.password') }}
					</a-typography-paragraph>
				</template>
				<template #description>
					<div class="content">
						<a-typography-paragraph>
							{{ $t('userSetting.SecuritySettings.placeholder.password') }}
						</a-typography-paragraph>
					</div>
					<div class="operation">
						<a-link @click="pwdModelClick">
							{{ $t('userSetting.SecuritySettings.button.update') }}
						</a-link>
					</div>
				</template>
			</a-list-item-meta>
		</a-list-item>
		<!-- <a-list-item>
      <a-list-item-meta>
        <template #avatar>
          <a-typography-paragraph>
            {{ $t('userSetting.SecuritySettings.form.label.securityQuestion') }}
          </a-typography-paragraph>
        </template>
        <template #description>
          <div class="content">
            <a-typography-paragraph class="tip">
              {{
                $t('userSetting.SecuritySettings.placeholder.securityQuestion')
              }}
            </a-typography-paragraph>
          </div>
          <div class="operation">
            <a-link>
              {{ $t('userSetting.SecuritySettings.button.settings') }}
            </a-link>
          </div>
        </template>
      </a-list-item-meta>
    </a-list-item>
    <a-list-item>
      <a-list-item-meta>
        <template #avatar>
          <a-typography-paragraph>
            {{ $t('userSetting.SecuritySettings.form.label.phone') }}
          </a-typography-paragraph>
        </template>
        <template #description>
          <div class="content">
            <a-typography-paragraph>
              已绑定：150******50
            </a-typography-paragraph>
          </div>
          <div class="operation">
            <a-link>
              {{ $t('userSetting.SecuritySettings.button.update') }}
            </a-link>
          </div>
        </template>
      </a-list-item-meta>
    </a-list-item>
    <a-list-item>
      <a-list-item-meta>
        <template #avatar>
          <a-typography-paragraph>
            {{ $t('userSetting.SecuritySettings.form.label.email') }}
          </a-typography-paragraph>
        </template>
        <template #description>
          <div class="content">
            <a-typography-paragraph class="tip">
              {{ $t('userSetting.SecuritySettings.placeholder.email') }}
            </a-typography-paragraph>
          </div>
          <div class="operation">
            <a-link>
              {{ $t('userSetting.SecuritySettings.button.update') }}
            </a-link>
          </div>
        </template>
      </a-list-item-meta>
    </a-list-item> -->
	</a-list>
	<a-modal v-model:visible="visible" :title="$t('userSetting.SecuritySettings.model.update.password')" @cancel="pwdModelCancel" @before-ok="pwdModelOk">
		<a-form :model="pwdForm">
			<a-form-item field="oldPassword" label="原密码">
				<a-input-password v-model="pwdForm.oldPassword" />
			</a-form-item>
			<a-form-item field="reOldPassword" label="再次输入">
				<a-input-password v-model="pwdForm.reOldPassword" />
			</a-form-item>
			<a-form-item field="newPassword" label="新密码">
				<a-input-password v-model="pwdForm.newPassword" />
			</a-form-item>
		</a-form>
	</a-modal>
</template>

<script lang="ts" setup>
	import { reactive, ref } from 'vue';
	import { Message } from '@arco-design/web-vue';
	import { useI18n } from 'vue-i18n';
	import {updatePassword,generateUpdatePassword, UpdatePassword} from '@/api/user-center' 
	  
	const visible = ref(false);
	const pwdForm = reactive({
		oldPassword: '',
		reOldPassword: '',
		newPassword: ''
	});
	const { t } = useI18n();
	const pwdModelClick = () => {
		visible.value = true;
	}
	const pwdModelCancel = () => {
		visible.value = false;
	}
	const pwdModelOk = (done) => {
		const updatePwd:UpdatePassword = generateUpdatePassword(pwdForm.oldPassword,pwdForm.reOldPassword,pwdForm.newPassword)
		try {
			const res  =   updatePassword(updatePwd);
			done();
			Message.success(t('userSetting.SecuritySettings.model.update.success'));
		} catch (err) {
			Message.error(t('userSetting.SecuritySettings.model.update.fail'))
			throw err;
		}
	};
</script>

<style scoped lang="less">
	:deep(.arco-list-item) {
		border-bottom: none !important;

		.arco-typography {
			margin-bottom: 20px;
		}

		.arco-list-item-meta-avatar {
			margin-bottom: 1px;
		}

		.arco-list-item-meta {
			padding: 0;
		}
	}

	:deep(.arco-list-item-meta-content) {
		flex: 1;
		border-bottom: 1px solid var(--color-neutral-3);

		.arco-list-item-meta-description {
			display: flex;
			flex-flow: row;
			justify-content: space-between;

			.tip {
				color: rgb(var(--gray-6));
			}

			.operation {
				margin-right: 6px;
			}
		}
	}
</style>